<template>
  <div>
    <el-card>
      <div slot="header">
        <span><b>分类列表</b></span>
        <el-button class="base-el-float-right" type="primary" icon="el-icon-plus" @click="handleEdit">新增主分类</el-button>
      </div>

      <PaginationTable :show-pagination="false" :table-data="categoryData">
        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-table :data="scope.row.subCategory">
              <el-table-column prop="name" label="子分类名称" />
              <el-table-column label="创建时间">
                <template slot-scope="scope2">
                  {{ scope2.row.createTime | timeFormatFilter }}
                </template>
              </el-table-column>
              <el-table-column prop="sort" label="排序" />
              <el-table-column label="是否可用">
                <template slot-scope="scope2">
                  <el-tag :type="scope2.row.isEnable ? 'success' : 'danger'">{{ scope2.row.isEnable ? '是' : '否' }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope2">
                  <el-button type="text" class="el-link--primary" @click="handleSubCategoryEdit(scope.row, scope2.row)">编辑</el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="主分类名称" />
        <el-table-column label="分类图片">
          <template slot-scope="scope">
            <el-image :src="scope.row.image" :preview-src-list="[scope.row.image]" />
          </template>
        </el-table-column>
        <el-table-column label="创建时间">
          <template slot-scope="scope">
            {{ scope.row.createTime | timeFormatFilter }}
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="排序" />
        <el-table-column label="是否可用">
          <template slot-scope="scope">
            <el-tag :type="scope.row.isEnable ? 'success' : 'danger'">{{ scope.row.isEnable ? '是' : '否' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button class="el-link--primary" type="text" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button class="el-link--primary" type="text" @click="handleSubCategoryEdit(scope.row)">添加子分类</el-button>
          </template>
        </el-table-column>
      </PaginationTable>
    </el-card>

    <!-- 主分类 -->
    <el-dialog title="主分类" :visible="mainCategoryDialogVisible" :show-close="false">
      <el-form ref="serviceTypeForm" :model="mainCategoryForm" label-width="80px">
        <el-form-item label="分类图片" prop="name" required>
          <MutilUpload v-model="mainCategoryForm.image" />
        </el-form-item>
        <el-form-item label="名称" prop="name" required>
          <el-input v-model="mainCategoryForm.name" />
        </el-form-item>
        <el-form-item label="排序:">
          <el-input-number v-model="mainCategoryForm.sort" :min="1" :step="1" />
        </el-form-item>
        <el-form-item label="是否可用:">
          <el-switch v-model="mainCategoryForm.isEnable" />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="actionCancel">取消</el-button>
        <el-button type="primary" @click="doMainCategorySave">确认</el-button>
      </div>
    </el-dialog>

    <!-- 子分类 -->
    <el-dialog title="子分类" :visible="subCategoryDialogVisible" :show-close="false">
      <el-form ref="subCategoryForm" :model="subCategoryForm" label-width="80px">
        <el-form-item label="名称" prop="name" required>
          <el-input v-model="subCategoryForm.name" />
        </el-form-item>
        <el-form-item label="排序:">
          <el-input-number v-model="subCategoryForm.sort" :min="1" :step="1" />
        </el-form-item>
        <el-form-item label="是否可用:">
          <el-switch v-model="subCategoryForm.isEnable" />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="actionCancel">取消</el-button>
        <el-button type="primary" @click="doSubCategorySave">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import PaginationTable from '@/components/PaginationTable'
import MutilUpload from '@/components/MutilUpload'
import { insertRecord, updateById } from '@/api/commoncrud'
import { categoryList } from '@/api/need'
export default {
  name: 'Category',
  components: { PaginationTable, MutilUpload },
  data() {
    return {
      area: {},
      categoryData: [],
      mainCategoryDialogVisible: false,
      mainCategoryForm: {},
      subCategoryDialogVisible: false,
      subCategoryForm: {}
    }
  },
  async created() {
    this.area = JSON.parse(window.localStorage.getItem('defaultArea'))
    await this.fetchData()
  },
  methods: {
    async fetchData() {
      const res = await categoryList(this.area._id)
      this.categoryData = res.data
    },
    handleEdit(data) {
      if (data) {
        this.mainCategoryForm = { ...data }
      } else {
        this.mainCategoryForm = {}
      }
      this.mainCategoryDialogVisible = true
    },
    async doMainCategorySave() {
      const mainCategoryId = this.mainCategoryForm._id
      delete this.mainCategoryForm._id
      if (mainCategoryId) {
        await updateById('maincategory', mainCategoryId, { ...this.mainCategoryForm })
      } else {
        await insertRecord('maincategory', { ...this.mainCategoryForm, areaId: this.area._id })
      }
      this.$message.success('操作成功!')
      await this.fetchData()
      this.actionCancel()
    },

    handleSubCategoryEdit(mainCategory, subCategory) {
      if (subCategory) {
        this.subCategoryForm = { ...subCategory }
      } else {
        this.subCategoryForm = { mainCategoryId: mainCategory._id, areaId: mainCategory.areaId }
      }
      this.subCategoryDialogVisible = true
    },

    async doSubCategorySave() {
      const subCategoryId = this.subCategoryForm._id
      delete this.subCategoryForm._id
      if (subCategoryId) {
        delete this.subCategoryForm.mainCategoryId
        delete this.subCategoryForm.areaId
        await updateById('subcategory', subCategoryId, { ...this.subCategoryForm })
        await this.fetchData()
      } else {
        const res = await insertRecord('subcategory', { ...this.subCategoryForm })
        this.categoryData.find(v => v._id === this.subCategoryForm.mainCategoryId).subCategory.push(res.data)
      }
      this.$message.success('操作成功!')
      this.actionCancel()
    },
    actionCancel() {
      this.mainCategoryForm = {}
      this.mainCategoryDialogVisible = false
      this.subCategoryForm = {}
      this.subCategoryDialogVisible = false
    }
  }
}
</script>

<style scoped>

</style>
